<template>
    <div id="jx-share-virtual-machine" class="jx-virtual-machine"
        v-loading="deskLoading"
        :element-loading-text="deskLoadingText"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="jx-virtual-machine-header">
            <div class="jx-virtual-machine-header-logo fl" :title="courseName">{{courseName}}</div>
            <div class="jx-virtual-machine-nav2 fl" v-if="VirtualMachineUrlArr.length > 1">
                <span class="fl" :class="{ active : MachineNavTabIndex == (index+1)}" v-for="(item, index) in VirtualMachineUrlArr"  @click="MachineNavTab2(index, item)">{{ item.containerRole }}</span>
            </div>
        </div>
        <div class="jx-virtual-machine-main" v-if="VirtualMachineUrlArr.length > 0">
            <div class="step-main-mirror">
                <div class="mirror-iframe">
                    <iframe name="iframeitem" v-for="(item, index) in VirtualMachineUrlArr" :id="'VirtualMachineIframe' + item.containerId"  v-show="MachineNavTabIndex == (index+1)" :src="item.desktopUrl" width="100%" :height="iframeHeight" frameborder="0"></iframe>
                </div>
            </div>
        </div>
        <div class="iframe-dialog" v-show="!controllable"></div>
        <div class="jx-vitual-machine-main-close" v-show="controllable">
            <!-- <img width="100%" height="100%" :src="dialogScreenshotUrl" /> -->
            <div class="jx-vitual-machine-main-close-bg">
                <i class="iconfont icon-diannao-copy"></i>
                <span>分享已关闭</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                //桌面loading
                deskLoading: false,
                deskLoadingText: '桌面加載中',

                contentLoading: null,
                // 登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
                roles: '',
                // 课程ID
                courseId: '',
                // 章节ID
                chapterId: '',
                // 课程名称
                courseName: '',
                // 虚机全屏fullScreen
                fullScreen: false,
                // 虚机地址
                VirtualMachineUrl: '',
                VirtualMachineUrlArr: [],
                // 虚机当前容器ID
                VirtualMachineId: '',
                iframeHeight: '',
                // 虚机切换导航列表
                virtualMachineNavList: [],
                // 虚机导航列表index
                MachineNavTabIndex: '1',
                // 虚拟机id
                containerId: '',
                //通知消息
                websock: null,
                over: null,
                // 虚拟机遮罩
                controllable: false,
                dialogScreenshotUrl: ''
            }
        },
        destroyed: function() {
　　　　    // 页面销毁时关闭长连接
　　　　　　this.over();
　　　　},
        created () {
            let self = this
            //登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
            self.roles = self.$store.state.user.roles[0]
            // 课程ID
            self.courseId = self.$route.query.courseId
            // 章节ID
            self.chapterId = self.$route.query.chapterId

            self.$nextTick(function () {
                self.iframeHeight = $(window).height() - 60
                // if(self.fullScreen){

                //     $(".step-main-mirror").width(($(window).width() / self.iframeHeight) * ($(window).height() - 60))
                //     setTimeout(() => {
                //         $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                //     }, 1000);
                // }else{
                //     $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * ($(window).height() - 60))
                //     $('.jx-virtual-machine-main').height(self.iframeHeight)
                //     // $('.iframe-dialog').height(self.iframeHeight)
                //     $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                // }


                window.onresize = function () {
                    if(self.fullScreen){
                        $(".step-main-mirror").width(($(window).width() / self.iframeHeight) * self.iframeHeight)
                        setTimeout(() => {
                            $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                        }, 1000);
                    }else{
                        $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * ($(window).height() - 60))
                        $('.jx-virtual-machine-main').height(self.iframeHeight)
                        $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                    }
                }
                // if(window.screen.width <= 1280){
                //     self.fullScreen = true
                //     $(".step-main-mirror").width(($(window).width() / self.iframeHeight) * self.iframeHeight)
                //     setTimeout(() => {
                //         $('.mirror-iframe').width($(".step-main-mirror").width())
                //     }, 1000);
                // }
            })
            // 初始化进入实验
            self.InitExperiment(0)

            // 初始化socket
            self.InitWebSocket()

        },
        methods: {
            // 通知webSocket
            InitWebSocket(){
                let self = this
                let hostname = window.location.host
                const wsuri = "ws://"+hostname+"/tes/ws/close-share/"+self.courseId+'/'+self.chapterId
                self.websock = new WebSocket(wsuri);
                self.websock.onopen = self.websocketonopen;
                self.websock.onmessage = self.websocketonmessage;
                self.over = () => {
                    self.websock.close()
                }
            },
            websocketonopen(){
                console.log('open sucess')
            },
            websocketonmessage(e){ //数据接收
                let self = this
                const redata = JSON.parse(e.data)

                if(self.courseId == redata.userId && self.chapterId == redata.chapterId){
                    if(redata.type == '6'){
                        if(redata.fullScreen){
                            $(".step-main-mirror").width(($(window).width() / self.iframeHeight) * self.iframeHeight)
                            setTimeout(() => {
                                $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                            }, 1000);
                        }else{
                            setTimeout(() => {
                                self.iframeHeight = $(window).height() - 60
                                $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * self.iframeHeight)
                                $('.jx-virtual-machine-main').height(self.iframeHeight)
                                $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                            }, 100);
                        }
                    }else if(redata.type == '7'){
                        self.MachineNavTabIndex = redata.number
                    }else if(redata.type == '2'){
                        self.controllable = true
                        self.VirtualMachineUrlArr = []
                    }
                }
            },
            convertCanvasToImage(canvas) {
                let image = new Image();
                image.crossOrigin = "anonymous";
                image.src = canvas.toDataURL("image/png");
                return image;
            },
            // 初始化进入实验
            InitExperiment(index){
                // index 虚机index
                let self = this
                self.fullScreen = false

                self.deskLoading = true
                self.deskLoadingText = '桌面加載中'
                self.VirtualMachineUrl = ''
                // 清空虚机切换列表导航集合
                self.VirtualMachineIdArr = []
                self.virtualMachineNavList = []
                self.$http.get('/tes/experiment/share/'+self.courseId+'/'+self.chapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.fullScreen){
                            setTimeout(() => {
                                $(".step-main-mirror").width(($(window).width() / ($(window).height() - 60)) * ($(window).height() - 60))
                                $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                            }, 1000);
                        }else{
                            $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * ($(window).height() - 60))
                            $('.jx-virtual-machine-main').height(self.iframeHeight)
                            // $('.iframe-dialog').height(self.iframeHeight)
                            $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                        }
                        // 虚机地址默认设置主节点
                        self.VirtualMachineUrl = res.data.containers[index].desktopUrl || res.data.containers[index].notebookUrl

                        self.VirtualMachineUrlArr = res.data.containers
                        self.MachineNavTabIndex = res.data.number
                        // 虚机容器ID
                        self.VirtualMachineId = res.data.containers[index].containerId

                        // 虚拟名称
                        self.courseName = res.data.username

                        // 虚机是否遮罩
                        self.controllable = res.data.controllable
                        if(!self.controllable){
                            // 或者直接返回整个事件
                            document.oncontextmenu = function(){
                                return false;
                            }
                            document.onkeydown=function (e){
                                var currKey  =0, evt = e || window.event;
                                currKey = evt.keyCode || evt.which || evt.charCode;
                                if (currKey == 123) {
                                    window.event.cancelBubble = true;
                                    window.event.returnValue = false;
                                }
                            }
                        }
                        self.fullScreen = false
                        let fullData = []
                        for(let i = 0; i < res.data.containers.length; i++){
                            self.VirtualMachineIdArr.push(res.data.containers[i].containerId)
                            // 虚机切换列表导航集合
                            // self.virtualMachineNavList.push(res.data.containers[i].containerRole)
                            // 如果含有全屏状态
                            // if(res.data.containers[i].fullScreen){
                            //     fullData.push(res.data.containers[i].containerId)
                            //     self.VirtualFullScreen(1,fullData)
                            // }
                        }

                        setTimeout(() => {
                            self.deskLoading = false
                        }, 800);
                    }else if(res.code == '500112'){
                        self.deskLoading = false
                        self.controllable = true
                    }else{
                        self.deskLoading = false
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 虚机导航列表切换
            MachineNavTab2(index){
                let self = this
                self.MachineNavTabIndex = index+1
                // 重新初始化进入实验
                // self.InitExperiment(index)
            }
        }
    }
</script>


<style lang="scss" >
    @import "./../../../styles/layout/color_variables";
    #jx-share-virtual-machine{
        position: relative;
        height: 100%;
        overflow: hidden;
        .jx-content {
            width: 100%;
            min-height: 600px;
            .jx-content-tips{
                text-align: center;
                margin-top: 100px;
            }
        }
        .el-dialog__footer{
            text-align: center;
            .dialog-footer{
                .el-button {
                    width: 90px;
                }
            }
        }
        .jx-virtual-machine-header{
            height: 60px;
            line-height: 60px;
            background: #101937;
            color: $white;
            .jx-virtual-machine-header-logo{
                margin-left: 40px;
                font-size: 16px;
                width: 150px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                line-height: 1;
                margin-top: 30px;
            }
            .jx-virtual-machine-nav{
                margin: 20px 0 0 70px;
                float: left;
                height: 40px;
                line-height: 40px;
                span{
                    width: 90px;
                    color: $white;
                    cursor: pointer;
                    text-align: center;
                    border-radius: 5px 5px 0 0;
                    transition: .3s;
                    // &:hover{
                    //     background: $white;
                    //     color: #101937;
                    // }
                    &.active{
                        background: $white;
                        color: #101937;
                    }
                }
            }
            .jx-virtual-machine-nav2{
                width: 50%;
                @extend .jx-virtual-machine-nav;
            }
        }
        .jx-virtual-machine-main{
            position: relative;
            // position: absolute;
            // top: 0;
            // right: 0;
            // bottom: 0;
            // left: 0;
            // top: 60px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            // margin-top: 60px;
            .tab-main {
                padding: 20px;
            }
            .step-main-content{
                // width: 35%;
                height: 100%;
                overflow-x: scroll;
                &::-webkit-scrollbar {
                    width: 5px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #c1c1c1;
                }
                .step-main-content-text{
                    width: 100%;
                    background: $white;
                    margin-top: 10px;
                    .display-hide-btn{
                        float: right;
                        margin: 10px 10px 20px 0;
                    }
                }
                .step-main-btn-box{
                    overflow: hidden;
                    padding: 12px 16px 15px 15px;
                    text-align: right;
                    i{
                        color: #385899;
                        font-size: 16px;
                        line-height: 16px;
                        vertical-align: top;
                        cursor: pointer;
                    }
                }
                .step-main-btn-group{
                    text-align: center;
                    margin-top: 20px;
                    button{
                        width: 90px;
                        &:first-child{
                            // background: $btn-blue;
                            // color: #fff;
                            margin-right: 5px;
                        }
                    }
                }
            }
            .step-main-mirror{
                position: relative;
                width: 65%;
                height: 100%;
                margin: 0 auto;
                .mirror-iframe{
                    position: relative;
                }

            }
        }
        .iframe-dialog{
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0);
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }
        .jx-vitual-machine-main-close{
            width: 100%;
            height: 100%;
            position: relative;
            text-align: center;
            img{
                position: absolute;
            }
            .jx-vitual-machine-main-close-bg{
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                text-align: center;
                background: rgba(0,0,0,.6);
                overflow: hidden;
                i{
                    font-size: 76px;
                    color: $white;
                    margin-top: 25vh;
                    display: block;
                }
                span{
                    color: $white;
                    font-size: 24px;
                    margin-top: 5px;
                }
            }
        }
    }
</style>

